<template>
  <div>
    <ocean :use="form"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { useForm } from '@/ocean';
import { StoreAPI } from '@/app/api';
import { format, getMinutes } from 'date-fns';
import { ref } from 'vue';
type Model = {
  status: number;
  storeAddress: string;
  storeName: string;
  openTime: any;
  endTime: any;
  openingTime: any;
}

let props = defineProps<{
  row: Model
}>()
let isEdit = !!props.row;

let formatOpenTime = ref("");
let formatEndTime = ref("");

let form = useForm<Model>();
form.item('门店名称', 'storeName').input();
form.item('门店地址', 'storeAddress').input();
form.item('门店状态', 'status').select({ options: [{ label: '运营中', value: 1 }, { label: '停运', value: 2 }] });
form.item('运营开始时间', 'openTime').time({ format: "HH:mm" });
form.item('运营结束时间', 'endTime').time({ format: "HH:mm" });

let submitAPI = StoreAPI.addStore;

if (isEdit) {
  submitAPI = StoreAPI.updateStore;
  const t = props.row.openingTime.split('-');
  // formatOpenTime.value = t[0];
  // formatEndTime.value = t[1];
  form.setModel(props.row)
}

const submit = () => {
  console.log(form.model)
  const o = format(form.model.openTime, 'HH:mm');
  const e = format(form.model.endTime, 'HH:mm')
  return submitAPI({
    ...form.model,
    openTime: o,
    endTime: e,
  });
}

defineExpose({ submit });
</script>